import "./base.css";
import { useState, useEffect } from "react";

export const notifications = new (class {
  constructor() {
    this.counters = [];
    this.divContainer = document.createElement("div");
    this.divContainer.id = "notificationsContainer";
    document.body.appendChild(this.divContainer);
  }
  show(msg = "ok.   ", type = "ok") {
    // create new notification object
    const div = document.createElement("div");
    div.id = "notifications";
    div.textContent = msg;

    // append to body, must be appended then can calculate y
    this.divContainer.appendChild(div);

    // set counters
    this.counters.push(true);

    // basic settings
    div.style.color = type === "ok" ? "green" : "red";

    // 使用 setTimeout 来延迟一段时间后隐藏通知
    // 6 秒后隐藏通知
    setTimeout(() => {
      div.classList.add("show");
      setTimeout(() => {
        // 移除通知元素
        div.classList.remove("show");
        // 1s animation
        setTimeout(() => {
          if (this.counters[0]) this.divContainer.removeChild(div);
        }, 1000);
      }, 5000);
    }, 10);
  }
})();

export const pageController = () => {
  // const queryParams = new URLSearchParams(window.location.search);
  // const nameFromQuery = queryParams.get("tableName");
  let allowed = false;
  return allowed;
};

export function Box() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    function handleMove(e) {
      setPosition({ x: e.clientX, y: e.clientY + window.scrollY });
    }
    window.addEventListener("pointermove", handleMove);
    return () => {
      window.removeEventListener("pointermove", handleMove);
    };
  }, []);

  return (
    <div
      style={{
        position: "absolute",
        backgroundColor: "pink",
        borderRadius: "50%",
        opacity: 0.6,
        transform: `translate(${position.x}px, ${position.y}px)`,
        pointerEvents: "none",
        left: -20,
        top: -20,
        width: 40,
        height: 40,
        zIndex: 1000,
      }}
    />
  );
}
